<template>
  <div>
    <el-dialog :title="type == 1 ? '公 告' : '活 动'" :visible.sync="visible" width="50%">
      <div>
        <div class="info-header">
          {{ type == 1 ? info.title : info.topic }}
          <div class="info-time">{{ info.createTime }}</div>
        </div>
        <div class="info-content">
          {{ type == 1 ? info.content : info.details }}
        </div>
        <div class="info-other" v-if="type == 2">
          <el-descriptions>
            <el-descriptions-item label="活动地址">
              {{ info.location }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              {{ info.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="活动时间">
              {{ info.time }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 1,
      visible: false,
      info: {},
    }
  },
  methods: {
    openDia(data, type) {
      this.type = type
      this.info = { ...data }
      this.visible = true
    },
  },
}
</script>

<style scoped>
.info-header {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.info-time {
  font-size: 16px;
  margin-top: 10px;
  color: #ccc;
  font-weight: 500;
}

.info-content {
  padding: 10px;
  white-space: pre-wrap;
}
.info-other {
  margin-top: 30px;
  padding: 10px;
}
</style>
